<template>
  <div>
    <span>
      父子组件传值：{{countRef}}
      <my-counter :countRef="countRef" @countChange="getCount"></my-counter>
      <button @click="countRef++">计数+</button>
    </span>

    <my-count :count="countRef" @add="getCount"></my-count>

    <p>v-modal 父组件searchText: {{countRef}}</p>
    <!--<Vmodel :modelValue="countRef" @update:modelValue="getCount"/>-->
    <Vmodel v-model="countRef"/>

    <p>firstName:{{firstName}} lastName:{{lastName}}</p>
    <username v-model:firstName.capitalize="firstName" v-model:lastName.toUpperCase="lastName" />

    <p>{{searchText}}</p>
    <CustomInput v-model="searchText"/>
  </div>
</template>
<script setup>
import MyCounter from '@/views/passValue/defineProps/MyCounter.vue'
import { ref } from 'vue'
import MyCount from '@/views/passValue/hook/MyCount.vue'
import Vmodel from '@/views/passValue/vmodel/index.vue'
import Username from '@/views/passValue/vmodel/username.vue'
import CustomInput from '@/views/passValue/vmodel/customInput.vue'

const countRef = ref(0)

const firstName = ref('')
const lastName = ref('')

const searchText = ref('')

const getCount = (count) => {
  console.log(count)
  countRef.value = count
}
</script>

<style scoped>

</style>
